<template>
  <div>
    <div class="werapp">
      <div class="top">
        <div class="top-left">
          <a class="navbar-brand" href="javascript:;;">
            <b>HAPPY</b>
            <p>MMALL</p>
          </a>
        </div>
        <div class="top-right">
          <a
            href="javascript:;;"
            class="dropdown-toggle"
            @click="$router.push('/login')"
          >
            <i class="el-icon-user-solid"></i>
            <p>欢迎，</p>
          </a>
          <!-- <a href="javascript:;;" class="wapp">

          </a> -->
        </div>
      </div>
      <div class="bton">
        <div class="bton-left">
          <ul>
            <router-link
              :to="item.desc"
              tag="li"
              v-for="(item) in list"
              :key="item.id"
              class="li"
            >
              <i :class="item.icon"></i>{{ item.title }}
              <router-link
                :to="its.desc"
                tag="li"
                v-for="its in item.children"
                :key="its.id"
                @click.native="goods(its)"
                :class="{ 'actives': active === its.id}"
              >
                <i :class="its.icon"></i>{{ its.title }}
              </router-link>
            </router-link>
            <!-- <router-link to="/product/index" tag="li"
              ><i class="el-icon-share"></i>首页</router-link
            >
            <router-link to="" tag="li"
              ><i class="el-icon-share"></i>商品</router-link
            >
            <router-link to="/product/index/indexs" tag="li" class="box1"
              ><i class="el-icon-share"></i>商品管理</router-link
            >
            <router-link to="" tag="li" class="box1"
              ><i class="el-icon-share"></i>品类管理</router-link
            >
            <router-link to="" tag="li"
              ><i class="el-icon-share"></i>订单</router-link
            >
            <router-link to="" tag="li" class="box1"
              ><i class="el-icon-share"></i>订单管理</router-link
            >
            <router-link to="" tag="li"
              ><i class="el-icon-share"></i>用户</router-link
            >
            <router-link to="/user/index" tag="li" class="box1"
              ><i class="el-icon-share"></i>用户列表</router-link
            > -->
          </ul>
        </div>
        <div class="bton-right">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  created () {
    console.log(this.active);;
  },
  data() {
    return {
      active:"",
      list: [
        {
          id:"1",
          title: "首页",
          desc: "/product/index",
          icon: "el-icon-s-data",
        },
        {
          id:"2",
          title: "商品",
          desc: "",
          icon:"el-icon-s-fold",
          children: [
            {
              id:"11",
              title: "商品管理",
              desc: "/product/index/indexs",
            },
            {
              id:"22",
              title: "品类管理",
              desc: "/product-category/index",
            },
          ],
        },
        {
          id:"3",
          title: "订单",
          desc: "",
          icon:"el-icon-circle-check",
          children: [
            {
              id:"33",
              title: "订单管理",
              desc: "/order/index",
            },
          ],
        },

        {
          id:"4",
          title: "用户",
          desc: "",
          icon:"el-icon-s-custom",
          children: [
            {
              id:"44",
              title: "用户列表",
              desc: "/user/index",
            },
          ],
        },
      ],
    };
  },
  methods: {
    goods(its) {
      // console.log(its);
      this.active=its.id;
      // console.log(this.active);
    }
  },
};
</script>

<style lang="scss" scoped>
.werapp {
  display: flex;
  height: 100vh;
  flex-direction: column;
  .top {
    height: 60px;
    width: 100%;
    background: #fff;
    display: flex;
    .top-left {
      width: 260px;
      background: #32323a;
      .navbar-brand {
        float: left;
        height: 50px;
        padding: 15px 30px;
        font-size: 30px;
        line-height: 30px;
        line-height: 20px;
        color: #fff;
        z-index: 9999;
        &:hover {
          color: #fff;
          background-color: #2b2e33;
          width: 200px;
        }
        &:focus {
          color: #fff;
          // width: 260px;
          //   text-align: left;
          //   height: 60px;
          //   font-size: 30px;
          //   font-weight: 700;
          text-transform: uppercase;
          background: #32323a;
          outline: none;
        }
        b {
          color: #2dafcb;
        }
        p {
          position: absolute;
          z-index: 999;
          top: 50px;
        }
      }
    }
    .top-right {
      flex: 1;
      .dropdown-toggle {
        float: right !important;
        display: flex;
        position: relative;
        color: black;
        // top: 20px;
        padding: 20px;
      }
    }
  }
  .bton {
    flex: 1;
    display: flex;
    .bton-left {
      width: 260px;
      background: #2b2e33;
      ul {
        list-style: none;
        li {
          padding: 20px;
          color: white;
          //  .li{
          //   padding: 10px 0;
          .li-item {
            background: black;
          }
          &.actives {
            background: #2dafcb;
          }
        }
        .box1 {
          background: black;
          padding: 10px 20px;
        }
      }
    }
    .bton-right {
      flex: 1;
      width: 1px;
    }
  }
}
</style>
